<template>
  <div class="pad-l-10 pad-r-10 pad-t-10">
    <header-bg></header-bg>
    <div class="flex flex-between pad-12 express-pannel">
      <div class="img-wrap"><img class="width-80 height-80" v-if="orderGoodsList.length" :src="orderGoodsList[0].goodsImageUrl" alt=""></div>
      <div class="flex-item mar-l-10 pad-r-14">
        <div class="font-18 font-w mar-t-5">{{expressDetail.stateText}}</div>
        <div class="goodstitle line-1 mar-t-10" v-if="orderGoodsList.length">{{orderGoodsList[0].goodsTitle}}</div>
        <div class="mar-t-18 font-12 font-color-9">{{expressDetail.expressName}}<span class="mar-l-5">{{expressDetail.trackingNo}}</span></div>
      </div>
    </div>
    <div class="express-pannel mar-t-10 steps-box">
      <div class="steps-item" :class="{'steps-active': index === active}" v-for="(item, index) in Traces" :key="index">
        <div class="steps-info">
          <div class="steps-title">{{item.AcceptStation}}</div>
          <div class="font-12 font-color-9 mar-t-7">{{item.AcceptTime}}</div>
        </div>
        <div class="steps-icon">
          <img v-if="fileSpace && index === active" class="width-14 height-14" :src="fileSpace + '/images/express-car-2.png'" alt="">
        </div>
      </div>
      <div class="pad-t-10 text-align-c" v-if="noTraces">暂无物流信息</div>
    </div>
  </div>
</template>
<script>
import HeaderBg from '@/components/headerBg'
import { getProjectOrder } from '@/api/distribution'
import { queryExpressByApartOrderId } from '@/api/common'
export default {
  components: { HeaderBg },
  data() {
    return {
      active: 0,
      orderId: '',
      orderGoodsList: [],
      expressDetail: {},
      apartOrderId: '',
      Traces: [],
      noTraces: false
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  onShow() {
    this.orderId = this.getCurrentPage().query.orderId
    this.apartOrderId = this.getCurrentPage().query.apartOrderId || ''
    this.getOrderDetail()
  },
  methods: {
    getOrderDetail() {
      getProjectOrder(this.orderId).then(response => {
        if (response.isError) return
        if (this.apartOrderId) {
          this.orderGoodsList = response.data.orderGoodsList.filter(item => item.apartOrderId === this.apartOrderId)
          console.log(this.orderGoodsList)
          this.getExpressDetail(this.apartOrderId)
        } else {
          this.orderGoodsList = response.data.orderGoodsList
          this.getExpressDetail(this.orderGoodsList[0].apartOrderId)
        }
      }).catch(() => {
      })
    },
    // 获取物流详情
    getExpressDetail(apartOrderId) {
      this.noTraces = false
      queryExpressByApartOrderId(apartOrderId).then(response => {
        if (response.isError) return
        this.expressDetail = response.data
        this.Traces = response.data.Traces
        if (this.Traces.length === 0) this.noTraces = true
      }).catch(() => {
      })
    }
  }
}
</script>
<style lang="less" scoped>
.express-pannel{
  background-color: white;
  border-radius: 5px;
  line-height: 1;
  .line-1{
    font-size: 12px;
    color: #999;
    height: 13px;
  }
}
.img-wrap{
  width: 80px;
  height: 80px;
  border-radius: 5px;
  overflow: hidden;
  img{
    width: 80px;
    height: 80px;
  }
}
.goodstitle{
  line-height: 13px;
}
.steps-box{
  padding: 28px 22px 60px;
  min-height: 350px;
}
.steps-item{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  border-left: 1px solid #eee;
  padding-left: 20px;
  position: relative;
  .steps-info{
    top: -8px;
    font-size: 15px;
    position: relative;
    padding-bottom: 45px;
  }
  &:last-child{
    padding-bottom: 0;
    border-left: unset;
    .steps-info{
      top: -8px;
      padding-bottom: 0px;
    }
  }
  .steps-icon{
    position: absolute;
    left: -5px;
    top: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #C0C0C0;
  }
  &.steps-active{
    .steps-title{
      font-weight: bold;
    }
    .steps-icon{
      left: -10.5px;
      top: -10.5px;
      width: 21px;
      height: 21px;
      background-color: #7529FF;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
